<template>
    <div class="bgc">
        <van-nav-bar title="修改用户信息" left-arrow @click-left="$router.back()" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" type="oldpassword" name="username" label="用户名" :value="username"
                    :rules="[{ required: true, message: '请填写用户名' }, { pattern: usernamepattern, message: '请输入5-9位字符,只能是字母开头,中间字符字母数字下划线' }]" />
                <van-field v-model="tel" type="newpassword" name="tel" label="电话" :value="tel"
                    :rules="[{ required: true, message: '请填写手机号' }, { pattern: telPattern, message: '请输入11位数手机号,1开头' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :disabled="flag">
                    点击确认修改
                </van-button>
            </div>
        </van-form>
        <van-image class="image"
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.7FpLSk8e26NtpBH97cnd3wHaEK?w=319&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
        <van-overlay :show="show" class="loadingBox">
            <van-loading type="spinner" color="#1989fa" class="loading" />
        </van-overlay>
    </div>
</template>

<script setup>
import { useChangeUserInfoHandler } from '@/hooks/login/useUser'
const { telPattern, usernamepattern, username, tel, show, onSubmit, flag } = useChangeUserInfoHandler()
</script>

<style lang="scss" scoped>
.bgc {
    background-color: #fff;
    height: 100%;

    .van-form {
        margin-top: 30px;
    }

    .loadingBox {
        display: flex;
        justify-content: center;

        .loading {
            line-height: 600px;

        }
    }
}
</style>